/*
 * 秒杀活动报名
 * @author 
 * @time 2018/11/9
 * @since 1.0.0
 * */
// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
// 引入antd的组件
import {Col, Form, Modal, Row,Input} from 'antd'
const { TextArea } = Input;
//导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config'
import cx from 'classnames'
// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
// 当前组件样式
import styles from './enrollListStyle.less'
import ListPage from 'widget/PageTmpl/ListPage'
import Uploader from "widget/Upload";
import { chunk , cloneDeep } from 'lodash'
import FlagBtn from 'widget/FlagBtn/FlagView'

const  FormItem = Form.Item

const routeView = function ({ dispatch, model, form }) {

    const {resetFields, getFieldDecorator, validateFields, setFieldsValue} = form
    const {modelObj, namespace} = model
    const {areaList,visible,imgUrl,uploadFileObj,fileUrl,imageUrls,detail,showModal,query,rewardModal} = modelObj

  console.log(query)
    function detailSkip(type, id = '') {
        hashHistory.push({
            pathname: '/home/accountAdmin/accountDetail',
            query: {actionType: type, id}
        });
    }

    let option = [
        { value: '', label: '全部' },
        { value: '1', label: '无' },
        { value: '2', label: '有' },
        ]
    let goodsType=[
      { value: '1', label: '房源' },
      { value: '2', label: '停车场' },
      { value: '3', label: '商铺' },
      { value: '4', label: '日用快消' },
      { value: '5', label: '家电数码' },
      { value: '6', label: '首饰箱包' },
      { value: '7', label: '其他' },
    ]
    let statusList = [
      { value: '', label: '全部' },
      { value: '0', label: '待支付报名费' },
      { value: '1', label: '已报名' },
      ]
    
  let pageProps = {
    // ---------- 界面部分 ----------
    ui: {
      // 页面接口地址
      api_url: "admin/promotion/activity/list-by-page",
      // 接口方式
      method: "GET",
      // headers: {
      //   "Content-type": "application/json"
      // },
      app: "",
      // 接口参数
      params: {activityType:1,activityId:query.seckillActivityId},
      // 模拟数据 - 用于开发需要，若填充了上面的api_url之后，请将此项设置为null
      // "mockData": mockData,
      mockData: null,
      // 查询栏
      
      search_bar: {
        fields: [
          {
            en_name: 'productName',
            zh_name: '所属项目',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },
          {
            en_name: 'activityName',
            zh_name: '活动名称',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },
          {
            en_name: 'goodsName',
            zh_name: '商品名称',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },
          
          {
            en_name: 'customerName',
            zh_name: '客户姓名',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },
          {
            en_name: 'goodsType',
            zh_name: '商品类型',
            elem_type: 'Select',
            cmpt_items:goodsType,
            elem_valid_type: 'string',
          },
          {
            en_name: 'costFlag',
            zh_name: '报名费',
            elem_type: 'Select',
            cmpt_items:option,
            elem_valid_type: 'string',
          },
          {
            en_name: 'status',
            zh_name: '活动报名状态',
            elem_type: 'Select',
            cmpt_items:statusList,
            elem_valid_type: 'string',
          },
          {
            en_name: "validTime",
            zh_name: "有效期",
            elem_type: "Date",
            showTime:true,
            format: "YYYY-MM-DD HH:mm",
            query_format: "YYYY-MM-DD HH:mm",   // 请求参数, 当请求参数和显示时格式不同可通过该参数区分
            double: true,  // 日期范围组件 使用"YYYY-MM-DD HH:mm:ss"格式时, 显示不全时可使用该参数, 将占据两格位置
            split_keys: ['enrollmentStartTime', 'enrollmentStartEnd'],
            elem_valid_type: "string"
          },
          
        ],
        searchHandler: (e) => { // 自定义搜索按钮回调函数，点击搜索时触发
          console.log('search click',e)
        },
        resetHandler: () => { // 自定义重置按钮回调函数，点击重置时触发
          console.log('reset click')
        },
        searchCallback: params => { // 自定义搜索完成后的后调函数, 搜索完成后触发, 并将本次搜索的参数传入
          console.log('search finish', params)
        },
        pasteTargetList: [  // 列表组件中将输入框的en_name作为默认id(也可以通过id另外设置)
          'carName',  // 将需要粘贴事件拦截的输入框id以数组的形式传入, 该参数对应PasteFromClipboard组件的targetList参数
        ],
        handleParams: (options) => {
          // if(options.params && options.params.organizationId) { //现在只有案场可以， 如果以后公司或集团也可以选择， 则要获取下面的所有案场
          //   options.params.organizationId = getSiteIds(options.params.organizationId);
          // }
          // console.log(77787,query)
          // options.seckillActivityId =cloneDeep(query).seckillActivityId
          console.log(options,'options')
          return options;
        },
      },
      // 数据表格 
      "table":
        {
          status_params: "status=0",
          status_text: "全部",
          // 表头字段列表
          scroll: { x: 3000 },
          fields: [
            
            {
                en_name: "seckillEnrollmentId",
                zh_name: "报名编号",
              width:130
              },
            {
              en_name: "productName",
              zh_name: "所属项目",
              width:130
            },
            {
              en_name: "areaName",
              zh_name: "所属城市",
              width:150
            },
            {
              en_name: "goodsTypeName",
              zh_name: "商品类型",
              width:130
            },
            {
              en_name: "goodsName",
              zh_name: "商品名称",
              width:250,
            },
            {
              en_name: "activityName",
              zh_name: "活动名称",
              width:250,
            },
            {
              en_name: "costFlag",
              zh_name: "报名费",
              width:130,
              render:(a, item, index, d, e, f)=>{
                return <span>{['','无','有'][item.costFlag]}</span>
              }
            },
            {
              en_name: "statusName",
              zh_name: "活动报名状态",
              width:130,
            },
            {
              en_name: "coustomerName",
              zh_name: "客户姓名",
              width:130,
            },
            {
              en_name: "coustomerMobile",
              zh_name: "客户电话",
              width:130,
            },
            {
              en_name: 'createTime',
              zh_name: '报名时间',
              width:130
            },
            {title: '创建订单时间', dataIndex: 'createTime1', key: 'createTime1',width:180},
            {title: '兑奖方式', dataIndex: 'way', key: 'way',width:180},
            {title: '收货姓名', dataIndex: 'receive', key: 'receiver',width:180},
            {title: '收货手机', dataIndex: 'receivePhone', key: 'receivePhone',width:180},
            {title: '收货地址', dataIndex: 'receiveAddr', key: 'receiveAddr',width:180},
            {title: '是否已兑奖', dataIndex: 'reward', key: 'reward',width:180},
            {title: '兑奖人', dataIndex: 'rewardPerson', key: 'rewardPerson',width:180},
            {title: '备注', dataIndex: 'remark', key: 'remark',width:180},
                    
            // {
            //   en_name: "edit",
            //   zh_name: "操作",
            //   fixed: 'right',
            //   render: (a, item, index, d, e, f) => {
            //     return (
            //         <span>
            //             <FlagBtn node={<a onClick={() => {
            //                 dispatch({
            //                     type:`${namespace}/updateStore`,
            //                     payload:{
            //                         showModal:true
            //                     }
            //                 })
            //                 dispatch({
            //                   type:`${namespace}/getDetail`,
            //                   payload:{seckillEnrollmentId:item.seckillEnrollmentId}
            //                 })
            //             }}>查看</a>} > </FlagBtn>

                        
                        
            //         </span>
            //     )
            //   },
            // },
          ]
        },
        action_bar:[
            {
                label: "导出报名信息",
                type: "primary",
                onClick: (e) =>{
                   dispatch({
                     type:`${namespace}/derive`,
                     payload:{activityType:1}
                   })
                }
            },
        ]
    },
  }
    // 详情
    function handleDetailList () {
        // 项目名称 商品类型 详细房号 面积 户型 户型朝向 物业类型 秒杀标签 秒杀价 原价 应付报名费 应付定金 优惠价 平方价
        let list=[]
        let keys  = [
          {
            name: '项目名称',
            value: detail['productName'] || '',
          },
          {
            name: '商品类型',
            value:  detail['goodsTypeName'] || '',
          },
          {
            name:  '详细房号',
            value: detail['houseNo'] || '',
          },
          {
            name: '面积',
            value: detail['floorArea'] || '',
          },
          {
            name: '户型',
            value: detail['houseTypeName'] || '',
          },
          {
            name: '户型朝向',
            value: detail['huoseLocation'] || '',
          },
          {
            name: '物业类型',
            value:detail['propertyTypeName'] || '' ,
          },
          {
            name: '秒杀标签',
            value: detail['tags'] && detail['tags'].join(' ，') || '',
          },
          {
            name: '秒杀价',
            value: detail['seckillPrice'] || '',
          },
          {
            name: '原价',
            value: detail['originalPrice'] || '',
          },
          {
            name: '报名费',
            value: detail['securityMoney'] || '',
          },
          {
            name: '定金',
            value: detail['earnestMoney'] || '',
          },
          {
            name: '优惠价',//原价-秒杀价
            value: detail['salePrice'] || '',
          },
          {
            name: '平方价',//平方价
            value: detail['squarePrice'] || '',
          },
          {
            name: '客户姓名',//平方价
            value: detail['customerName'] || '',
          },
          {
            name: '联系方式',//平方价
            value: detail['mobile'] || '',
          },
          {
            name: '省份证号',//平方价
            value: detail['idCardNo'] || '',
          },
        ]
        
        if (detail.productType != 1) {//非房源类型，不显示户型和户型朝向
            keys.splice(4, 2)
          }
          list = chunk(keys, 2)
          detail.list = list
      }
      
      handleDetailList()
  if (!!modelObj.biz) {
		pageProps.biz = modelObj.biz
		pageProps.biz.syncBackCbf = (biz) => {

      //什么原因要有这个操作？页面上也没传id，导致页面停留久，接口一直请求，
      // console.log(biz,query)
      // if(!biz.seckillActivityId||biz.seckillActivityId!=query.seckillActivityId){
      //   biz.refreshListDatas()
      //   biz.seckillActivityId = query.seckillActivityId
      //   console.log(biz,'refres')
      // }
     
      
			dispatch({
				type: `${namespace}/updateStore`,
				payload: { biz }
			})
		}
    }
    function updateModal(){
        dispatch({
          type:`${namespace}/updateStore`,
          payload:{
            showModal:false
          }
        })
      }
  return (
    <div className={cx('pageLayout')}>
      <ListPage pageProps={pageProps} />
      <Modal
          title={'详情'}
          width='800px'
          // className="pubBiz_CommonModel"
          visible={showModal}
          onCancel={() => { updateModal() }}
          footer={null}
        >
          <div className={styles.detailContainer}>
            <table>
              <tbody className={'ant-table-tbody'}>
              {
                detail.list.map((item, index) => {
                  let item_0 = item[0] || {}
                  let item_1 = item[1] || {}
                  return (
                    <tr key={index}>
                      <td>{item_0.name}</td>
                      <td>{item_0.value}</td>
                      <td>{item_1.name}</td>
                      <td>{item_1.value}</td>
                    </tr>
                  )
                })
              }
              </tbody>
            </table>
          </div>
        </Modal>
        
    </div>
  )
}
// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(routeView))
